<template>
  <div id="user_container">
    <div class="user-wrap">
      <div class="user-header">
        <!-- <img src="../../assets/images/zly.jpg" alt="" /> -->
        <img :src="useInfo.user_pic" alt="" />
        <div class="header-left">
          <span class="user-email">{{useInfo.username}}</span>
          <span class="score">文明驾驶分 <b>{{useInfo.driving_point}}</b></span>
        </div>
      </div>
      <ul class="user-body">
        <li>
          <router-link to="/account">
            <i class="icon"></i>
            <div class="left">
              <div>
                <span>我的账户</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="/order">
            <i class="icon"></i>
            <div class="left">
              <div>
                <span>租车订单</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="/authentication">
            <i class="icon"></i>
            <div class="left">
              <div>
                <span>实名认证</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="/safe">
            <i class="icon"></i>
            <div class="left">
              <div>
                <span>安全设置</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </router-link>
        </li>
        <li>
          <router-link to="/">
            <i class="icon"></i>
            <div class="left">
              <div>
                <span>帮助中心</span>
                <i class="el-icon-arrow-right"></i>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
      <div class="user-logout" @click="logout">退出登录</div>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  name: "User",
  data() {
    return {
      useInfo: this.$store.state.userAbout.useInfo || JSON.parse(localStorage.getItem('userInfo'))
    }
  },
  mounted() {
  },
  methods: {
    // 退出登录
    logout() {
      this.Logout(JSON.parse(localStorage.getItem('userInfo')).id)
    },
    ...mapActions('userAbout', ['Logout'])
  },
};
</script>

<style lang="scss" scoped>
#user_container {
  z-index: 2;
  position: absolute;
  right: 0;
  top: 0;
  width: 408px;
  height: 100%;
  overflow: hidden;
  background-color: #34393f;
  .user-wrap {
    width: 348px;
    margin: auto;
    .user-header {
      margin-top: 80px;
      display: flex;
      img {
        display: inline-block;
        width: 80px;
        height: 80px;
        margin-left: 15px;
        margin-right: 22px;
        border: 5px solid #2f343a;
        border-radius: 100%;
      }
      .header-left {
        display: flex;
        flex-direction: column;
        margin-top: 10px;
        .user-email {
          font-size: 16px;
          color: #868687;
        }
        .score {
          display: inline-block;
          width: 120px;
          height: 30px;
          color: #fff;
          border-radius: 15px;
          margin-top: 15px;
          background-color: #11a6fa;
          text-align: center;
          line-height: 30px;
        }
      }
    }
    .user-body {
      margin-top: 60px;
      li {
        height: 64px;
        line-height: 64px;
        font-size: 15px;
        color: #777a7d;
        border-bottom: 2px solid #3f454c;
        position: relative;
        cursor: pointer;
        a {
          color: #777a7d;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          display: block;
          width: 100%;
          height: 100%;
          &:hover {
            color: #fff;
          }
        }
        .icon {
          width: 30px;
          height: 30px;
          display: inline-block;
          vertical-align: middle;
          margin-left: 2px;
          margin-right: 10px;
        }
        &:nth-child(1) .icon {
          background: url("../../assets/images/icon/icon-router-link-001.png");
        }
        &:nth-child(2) .icon {
          background: url("../../assets/images/icon/icon-router-link-002.png");
        }
        &:nth-child(3) .icon {
          background: url("../../assets/images/icon/icon-router-link-003.png");
        }
        &:nth-child(4) .icon {
          background: url("../../assets/images/icon/icon-router-link-004.png");
        }
        &:nth-child(5) .icon {
          background: url("../../assets/images/icon/icon-router-link-005.png");
        }
        .left {
          display: inline-block;
          width: 87%;
          div {
            display: flex;
            justify-content: space-between;
            i {
              line-height: 64px;
              padding-left: 10px;
            }
          }
        }
      }
    }
    .user-logout {
      background-color: #2d3339;
      width: 164px;
      height: 58px;
      border-radius: 29px;
      position: absolute;
      bottom: 60px;
      left: 50%;
      transform: translate(-50%);
      color: #fefefe;
      text-align: center;
      line-height: 58px;
      font-size: 16px;
      cursor: pointer;
      &:hover {
        color: #fff;
      }
    }
  }
}
</style>>